<!--查看应聘者，米娜事，考核，录用-->
<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <!--        resumeType 1 查看简历 2 待处理的简历 3 待面试简历 4 考核中的应聘者 5 一录用应聘者-->
        <span>{{
            resumeType == 1 ? '简历投递详情' : (resumeType == 2 ? '待处理简历' : (resumeType == 3 ? '待面试简历' : (resumeType == 4 ? '考核中' : '已录用')))
          }}</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <!--本体列表，数据 -->
        <div class="table-body">
          <div class="table-body-box">
            <el-table
                ref="multipleTable"
                :data="arryList"
                :border="tableoption.tableBorder"
                :height="tableHeight"
                tooltip-effect="dark">
              <el-table-column
                  label="应聘岗位"
                  align="center"
                  prop="name"
                  width="100"
                  :key="1">
                <template slot-scope="scope">
                  {{ scope.row.recruit.job ? scope.row.recruit.job.name : '未知或删除' }}
                </template>
              </el-table-column>
              <el-table-column
                  label="应聘人"
                  align="center"
                  prop="name"
                  width="90"
                  :key="2">
              </el-table-column>
              <el-table-column
                  label="头像"
                  align="center"
                  prop="use_time"
                  :key="4">
                <template slot-scope="scope">
                  <viewerModle type="1" :imgSrc="scope.row.pic"></viewerModle>
                </template>
              </el-table-column>
              <el-table-column
                  label="电话"
                  align="center"
                  prop="mobile_phone"
                  width="110"
                  :key="3">
              </el-table-column>
              <el-table-column
                  label="性别"
                  align="center"
                  :key="5"
                  width="60">
                <template slot-scope="scope">
                  {{ scope.row.sex == 1 ? '男' : '女' }}
                </template>
              </el-table-column>
              <el-table-column
                  label="年龄"
                  align="center"
                  prop="age"
                  width="60"
                  :key="6">
              </el-table-column>
              <el-table-column
                  label="学历"
                  align="center"
                  width="100"
                  :key="7">
                <template slot-scope="scope">
                  {{ scope.row.edu.name }}
                </template>
              </el-table-column>
              <el-table-column
                  label="投递时间"
                  align="center"
                  prop="create_time"
                  :key="8">
              </el-table-column>
              <el-table-column
                  label="简历审核时间"
                  align="center"
                  prop="examine_time"
                  :key="9"
                  v-if="resumeType>=3">
              </el-table-column>
              <el-table-column
                  label="面试审核时间"
                  align="center"
                  prop="trail_time"
                  :key="10"
                  v-if="resumeType>=4">
              </el-table-column>
              <el-table-column
                  label="考核完成时间"
                  align="center"
                  prop="employ_time"
                  :key="11"
                  v-if="resumeType>=5">
              </el-table-column>
              <el-table-column
                  label="状态"
                  align="center"
                  prop="status"
                  :key="12">
              </el-table-column>
              <el-table-column
                  label="操作"
                  align="center"
                  width="140"
                  :key="13">
                <template slot-scope="scope">
                  <el-button size="small" @click="showDetail(scope.row.id)">查看简历详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!--工具条 分页-->
        <el-col :span="24" class="toolbarLine">
          <el-pagination
              background
              :page-size="page.pagesize"
              :current-page="page.pageindex"
              layout="total, prev, pager, next"
              :total="page.total"
              @current-change="handleSizeChange"></el-pagination>
        </el-col>
      </div>
      <div class="cornerComment-in-footer">
        <el-button type="primary" @click="closePOpup" size="small">确定</el-button>
      </div>
    </div>
    <!--    简历详情-->
    <resumeDetail :visible.sync="resumeVisible" :resumeId="resumeId" resumeType="show"></resumeDetail>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import resumeDetail from "../resumeDetail";

export default {
  props: ['visible', 'resumeType', 'recruitId'], // recruitId 招聘id
  components: {
    resumeDetail
  },
  data() {
    return {
      dialogVisible: false,
      arearBox: '',
      tableoption: tableoption,
      editId: this.$route.query,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [],
      resumeVisible: false,
      resumeId: 0, // 简历id
      tableHeight: 0
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        let n = this;
        this.$nextTick(() => {
          let height = n.$refs.dialogBox.offsetHeight;  //top 50 1 search 50 page 50 10 footer 50 1
          this.tableHeight = height - (51 + 50 + 60 + 51)
        })
        // 整合查看的简历状态
        // resumeType 1 查看简历 2 待处理的简历 3 待面试简历 4 考核中的应聘者 5 一录用应聘者
        // 0 简历待处理 1 历史审核记录 2 面试待处理 3 面试历史 4 录用待处理 5 录用历史
        let a = Number(this.resumeType);
        this.vitaeType = a === 1 ? 6 : (a === 2 ? 0 : (a === 3 ? 2 : (a === 4 ? 4 : 5)));
        this.InitFn()
      } else {
        this.arryList = []
      }
    }
  },
  created() {
  },
  methods: {
    // 初始化
    async InitFn() {
      // <!--        resumeType 1 查看简历 2 待处理的简历 3 待面试简历 4 考核中的应聘者 5 一录用应聘者-->
      // p 	整型 	必填 	1 	- 	页码
      // rercuit_sn 	字符串 	必填 	1 	- 	招聘发布编号
      // title 	字符串 	必填 	1 	- 	招聘名称
      // name 	字符串 	必填 	1 	- 	面试人
      // mobile_phone 	字符串 	必填 	1 	- 	面试人电话
      // status 	字符串 	必填 	1 	- 	0待审核1通过2驳回
      // recruit_id
      // statuss 0 简历待审核 1 待面试 2 简历驳回不符合 3 面试淘汰 4 考核中 5 录用 6 考核不通过 7 离职中 8 离职通过 9 离职驳回
      // 0 简历待处理 1 历史审核记录 2 面试待处理 3 面试历史 4 录用待处理 5 录用历史
      let option = {
        p: this.page.pageindex,
        recruit_id: this.recruitId,
        type: this.vitaeType
      };
      let data = await this.$fetch(this.api.recruit.vitae.index, option);
      this.arryList = data.list.data
      this.page.total = data.list.total
    },
    handleEdit(index) {
      this.$router.push('/CornerApplyHestoryDetail?id=' + this.arryList[index].id)
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    showDetail(id) {
      this.resumeId = id
      this.resumeVisible = true
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 80%;
  height: 70%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.toolbarLine {
  text-align: center;
}
</style>


